<template>
  <div class="app-container">
    <el-card>
      <!-- 页面顶部部分 -->
      <page-tools>
        <template #before>
          <div class="before">
            <el-form label-width="100px" class="demo-ruleForm">
              <el-form-item width label="学科名称">
                <div class="item-catalogue">
                  <el-input v-model="subjectName" class="catalogue" />
                </div>
              </el-form-item>
            </el-form>
          </div>
        </template>
        <template #center>
          <div class="btn">
            <el-button @click="subjectName=''">清除</el-button>
            <el-button type="primary" @click="onSearchClick">搜索</el-button>
          </div>
        </template>
        <template #after>
          <div>
            <el-button type="success" icon="el-icon-edit" size="small" @click="onAddSubject">新增学科</el-button>
          </div>
        </template>
      </page-tools>

      <!-- 表格部分 -->
      <TableLayout :subject-list="subjectList" :counts="counts" @success="getSubjectList()" @updateSubject="getSubjectList()" />

      <!-- 放置分页组件 -->
      <el-row type="flex" justify="center" align="middle" style="height:60px">
        <el-pagination
          :current-page="page*1"
          :page-size="pagesize*1"
          :total="counts"
          layout="prev,pager,next"
          @current-change="changePage"
        />
      </el-row>
    </el-card>

    <!-- 新增学科弹窗 -->
    <Dialog :add-visible.sync="addSubjectVisible" @success="getSubjectList()" />
  </div>
</template>

<script>
import TableLayout from './tableLayout'
import pageTools from './pageTools'
import Dialog from './dialog'
import { getSubjectListAPI, DeleteSubjectAPI, SearchSubjectAPI } from '@/api'

export default {
  name: 'Subject',
  components: {
    TableLayout,
    pageTools,
    Dialog
  },
  data() {
    return {
      subjectList: [],
      counts: 0,
      pagesize: 10,
      page: 1,
			pages: 1,
      addSubjectVisible: false,
      subjectName: ''
    }
  },
  created() {
    this.getSubjectList()
  },
  methods: {
    /**
     * 获取学科列表
     */
    async getSubjectList() {
      const res = await getSubjectListAPI(this.page, this.pagesize)
			const { items, pages, counts, pagesize, page } = res
      this.counts = counts
      this.subjectList = items
			this.page = page
			this.pages = pages
			this.pagesize = pagesize
    },

		/**
		 * 点击分页按钮，切换分页
		 * */
		changePage(newpage) {
			this.page = newpage
			this.getSubjectList()
		},


    /**
    * pagesize发生改变时触发
    * handleSizeChange
    */
    handleSizeChange(size) {
      this.pagesize = size
      this.getSubjectList()
    },
    /**
     * 当前页码发生改变时触发
     * handleCurrentChange
     */
    handleCurrentChange(page) {
      console.log(page);
      this.page = page
      this.getSubjectList()
    },
    /**
     * 新增学科
     */
    onAddSubject() {
      this.addSubjectVisible = true
    },


    /**
     * 搜索点击事件
     * 如果 subname 中 找到了 当前输入框的值 就返回当前的
     */
    async  onSearchClick() {
      const { items } = await SearchSubjectAPI(this.subjectName, this.page, this.pagesize)
      this.subjectList = items
    }
  }
}
</script>

<style lang="scss" scpoed>
.app-container{
	padding: 15px;
}
::v-deep .el-card__body{
	padding-top: 3px;
}
::v-deep.btn {
  display: inline-block;
}
::v-deep.page {
  display: flex;
  justify-content: flex-end;
  margin: 10px 20px;
}
::v-deep .el-row{
	height: 40px !important;
}
.before{
		height: 40px !important;

}
</style>